<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>FC Tracker</title>
</h:head>

<h:body>
	<f:facet name="last">
		<h:outputStylesheet library="css" name="master.css" />
		<h:outputStylesheet library="css" name="index.css" />
	</f:facet>
    
	<div id="container">
		<div id="logindiv">
			<p:panelGrid columns="2">
				<h:panelGroup layout="block">
					<p:graphicImage name="index/logo.png" library="images" />
					<span id="logosub">Egészséges test és lélek</span>
				</h:panelGroup>
				<h:panelGroup layout="block">
					<ui:include src="fc/index/login.xhtml" />
					<p:button href="#registrationdiv" onclick="$('html,body').animate({ scrollTop: $('#registrationdiv').offset().top }, 'slow');" styleClass="nav-button"
						id="registrationnav" value="Regisztráció"></p:button>
				</h:panelGroup>
			</p:panelGrid>

			<a id="learnmore" href="#firstContentTable" onclick="$('html,body').animate({ scrollTop: $('#firstContentTable').offset().top }, 'slow');">Tudj meg többet!</a>
		</div>

		<p:panelGrid id="firstContentTable" styleClass="contentTable slide"
			columns="3" columnClasses="contentTableFirst, spacer, contentTableSecond">
			<h:panelGroup styleClass="contentGridLeft" layout="block">
				<p:graphicImage name="index/kaloria_icon.png" library="images" />
			</h:panelGroup>
			<h:panelGroup layout="block" />
			<h:panelGroup styleClass="contentGrid" layout="block">
				<h1>Kalóriatáblázat</h1>
				<span class="contentText">A kalóriatáblázat segítségével
					eligazodhatsz az ételek kavalkádjában. A táblázathoz akár
					hozzáadhatod saját ételeidet is!</span>
			</h:panelGroup>
		</p:panelGrid>

		<div class="separator"></div>
		<p:panelGrid styleClass="contentTable" columns="3"
			columnClasses="contentTableFirst, spacer, contentTableSecond">
			<h:panelGroup styleClass="contentGridLeft" layout="block">
				<h1>Receptek</h1>
				<span class="contentText">Tárold saját receptjeid és keresd
					vissza őket egyszerűen. Mindig tudni fogod, hogy receptjeid mennyi
					tápanyagot tartalmaznak.</span>
			</h:panelGroup>
			<h:panelGroup layout="block" />
			<h:panelGroup styleClass="contentGrid" layout="block">
				<p:graphicImage name="index/receptek_icon.png" library="images" />
			</h:panelGroup>
		</p:panelGrid>
		<div class="separator"></div>
		<p:panelGrid styleClass="contentTable" columns="3"
			columnClasses="contentTableFirst,spacer, contentTableSecond">
			<h:panelGroup styleClass="contentGridLeft" layout="block">
				<p:graphicImage name="index/naplok_icon.png" library="images" />
			</h:panelGroup>
			<h:panelGroup layout="block" />
			<h:panelGroup styleClass="contentGrid" layout="block">
				<h1>Naplók</h1>
				<span class="contentText">Az kaja és edzés naplók
					segítségével nyílvántarthatod, hogy mikor mennyit sikerült elérni a
					célkitűzéseidből.</span>
			</h:panelGroup>
		</p:panelGrid>
		
		<div class="separator"></div>
		<p:panelGrid styleClass="contentTable" columns="3"
			columnClasses="contentTableFirst, spacer, contentTableSecond">
			<h:panelGroup styleClass="contentGridLeft" layout="block">
				<h1>Kalkulátorok</h1>
				<span class="contentText">A sokoldalú kalkulátorok
					segítségével meghatározhatod jelenlegi formádat, ami segíthet a
					céljaid kitűzésében.</span>
			</h:panelGroup>
			<h:panelGroup layout="block" />
			<h:panelGroup styleClass="contentGrid" layout="block">
				<p:graphicImage name="index/kalkulatorok_icon.png" library="images" />
			</h:panelGroup>
		</p:panelGrid>
	</div>
	<div id="registrationdiv">
		<ui:include src="fc/index/registration.xhtml" />
	</div>
	<p:button href="#logindiv" id="backToTop" onclick="$('html,body').animate({ scrollTop: $('#logindiv').offset().top }, 'slow');" value="" ></p:button>
</h:body>
</html>
